<#include "header1.ftl"/>
<#include "header2.ftl"/>

<div id="goodsDiv">
    <!-- BEGIN SLIDER -->
    <#if panelContentList?? && panelContentList?size gt 0>

    <div class="page-slider">
        <div style="height: 40px;width: auto;background: #f9ffff"></div>
        <div id="carousel-example-generic" style="background: #f9ffff" class="carousel slide carousel-slider">
            <!-- Indicators -->
            <ol class="carousel-indicators" style="z-index: 1">
                <#list panelContentList as panel>
                    <li data-target="#carousel-example-generic" data-slide-to="${panel_index}" <#if panel_index == 0>class="active"</#if>></li>
                </#list>
            </ol>

            <!-- Wrapper for slides -->
            <div class="carousel-inner" role="listbox" style="height: 412px;width:980px;margin:0 auto">
                <!-- First slide -->
                <#list panelContentList as panel>
                    <div class="item carousel-item-four <#if panel_index == 0>active</#if>" style="background: url('${panel.picture!}');background-size: 100% 100%;background-position: center center;">
                        <#if panel.type == 1 ><a href="${panel.url!}" target="_blank"></#if>
                        <#if panel.type == 0 ><a href="javascript:void(0);" onclick="getGoodsDetail(${panel.itemId},0)"></#if>
                        <div class="container" style="width: 100%;height: 100%">
                        </div>
                        <#if panel.type == 1 || panel.type == 0></a></#if>
                    </div>
                </#list>

                <a class="left carousel-control carousel-control-shop" style="width: 5%;" href="#carousel-example-generic" role="button" data-slide="prev">
                    <i class="fa fa-angle-left" aria-hidden="true"></i>
                </a>
                <a class="right carousel-control carousel-control-shop" style="width: 5%;" href="#carousel-example-generic" role="button" data-slide="next">
                    <i class="fa fa-angle-right" aria-hidden="true"></i>
                </a>
            </div>

            <!-- Controls -->

        </div>
        <div style="height: 40px;width: auto;background: #f9ffff"></div>
    </div>

    <!-- END SLIDER -->
    <#if recommendGoodList?? && recommendGoodList?size gt 0>
    <div class="main" style="background: #f5f5f5;">
      <div class="container">
        <!-- BEGIN SALE PRODUCT & NEW ARRIVALS -->
        <div class="row margin-bottom-40" style="margin-top: 40px;">
          <!-- BEGIN SALE PRODUCT -->
          <div class="col-md-12 sale-product" >
            <h2 class="center" style="text-align: center;font-weight: 200;line-height: 34px;font-size: 28px; margin-top: 20px;font-family: Microsoft YaHei,serif;margin-bottom: 10px;">
                <b style="font-weight: 700;">精选</b>•商品
            </h2>
              <div style="width: 1170px;margin: 0 auto;">
                  <hr style="border-top: 2px solid #000;width: 40%;float: left; margin-top: 15px;"/>
                    <img src="assets/pages/img/products/heart.png" style="height: 26px;width: 26px;float: left;margin: 0px 10px;">
                  <hr style="border-top: 2px solid #000;width: 40%;float: left; margin-top: 15px;"/>
              </div>
              <h4 class="center" style="text-align: center;font-weight: 200;font-family: Microsoft YaHei,serif;margin-bottom: 50px;">
                  FEATURED ITEMS
              </h4>

              <#list recommendGoodList as goods>
                <#if goods_index%5 == 0><div class="owl-carousel owl-carousel5" <#if goods_index !=0>style="margin-top: 20px" </#if>></#if>
                    <div class="product-item">
                        <div class="pi-img-wrapper">
                            <img src="${goods.image!}" class="img-responsive" alt="Berry Lace Dress" style="height: 162px;width: 162px">
                           <div>
                                <#--<a href="${goods.image!}" class="btn btn-default fancybox-button">Zoom</a>-->
                                <a href="#product-pop-up${goods_index}" class="btn btn-default fancybox-fast-view" id="view${goods_index}">View</a>
                            </div>
                        </div>
                        <h3><a href="javascript:void(0);" onclick="getGoodsDetail(${goods.id!},0)">${goods.title!}</a></h3>
                        <div class="pi-price">￥
                            <#if goods.promotionDateFrom?? && goods.promotionDateTo?? && goods.promotionPrice?? && goods.promotionDateFrom?date lt .now?date && goods.promotionDateTo?date gt .now?date>
                                ${goods.promotionPrice!}
                            <#else>
                                ${goods.price!}
                            </#if>
                        </div>
                        <a href="javascript:void(0);" class="btn btn-default add2cart" onclick="addCartProduct('${goods.id}')">加入购物车</a>
                        <#if goods.tag == '0'><div class="sticker sticker-sale"></div></#if>
                        <#if goods.tag == '1'><div class="sticker sticker-new"></div></#if>
                    </div>
                  <#if (goods_index !=0 && (goods_index+1)%5 == 0) || goods_index == recommendGoodList?size -1></div></#if>
                </#list>
          </div>

          <!-- END SALE PRODUCT -->
        </div>
          <div class="tc mt50 ky-zjonline" style="margin: 50px;text-align: center;">
              <a href="javascript:void(0);" style="padding: 3px 40px;text-decoration: none" onclick="getGoods(0);" class="m">查看更多<span style="display: block;margin-top: 2px">More</span></a>
          </div>
        <!-- END SALE PRODUCT & NEW ARRIVALS -->
      </div>
    </div>
    </#if>
    </#if>
</div>
<#if recommendGoodList?? && recommendGoodList?size gt 0>
    <#list recommendGoodList as goods>
        <div id="product-pop-up${goods_index}" style="display: none; width: 700px;">
            <div class="product-page product-pop-up">
                <div class="row">
                    <div class="col-md-6 col-sm-6 col-xs-3">
                        <div class="product-main-image">
                            <img id="image_${goods.id}" src="${goods.image!}" alt="Cool green dress with red bell" class="img-responsive" style="width: 330px;height: 330px;">
                            <#if goods.tag == '1'><div class="sticker sticker-new" style="z-index: 999;"></div></#if>
                        </div>
                        <div class="product-other-images">
                            <#list goods.imageList as image>
                                <a href="${image}" class="fancybox-button" rel="photos-lib${goods_index}" goodsIndex="${goods_index}">
                                    <img id="image_${goods.id}_${image_index}" alt="Berry Lace Dress" src="${image}" style="height: 58px;width:58px">
                                </a>
                            </#list>
                            <#--  <a href="javascript:;" class="active"><img alt="Berry Lace Dress" src="assets/pages/img/products/model1.jpg"></a>
                              <a href="javascript:;"><img alt="Berry Lace Dress" src="assets/pages/img/products/calendar2.jpg"></a>
                              <a href="javascript:;"><img alt="Berry Lace Dress" src="assets/pages/img/products/calendar3.jpg"></a>-->
                        </div>
                    </div>
                    <div class="col-md-6 col-sm-6 col-xs-9">
                        <h2>${goods.title!}</h2>
                        <div class="price-availability-block clearfix">
                            <div class="price">
                                <#if goods.promotionDateFrom?? && goods.promotionDateTo?? && goods.promotionPrice?? && goods.promotionDateFrom?date lt .now?date && goods.promotionDateTo?date gt .now?date>
                                    <strong><span>￥</span>${goods.promotionPrice!}</strong>
                                    <em>￥<span>${goods.price!}</span></em>
                                <#else>
                                    <strong><span>￥</span>${goods.price!}</strong>
                                </#if>
                            </div>
                        </div>
                        <div class="description">
                            <p>${goods.introduction}</p>
                        </div>
                        <div class="product-page-options">
                            <div class="pull-left">
                                <label class="control-label">库存:</label>
                                <label class="control-label">${goods.num!}</label>
                            </div>
                        </div>
                        <div class="product-page-cart" style="margin-top: 148px">
                            <div class="product-quantity">
                                <input id="product-quantity" limit=${goods.num!} type="text" value="1" readonly name="product-quantity" class="form-control input-sm">
                            </div>
                            <button class="btn btn-primary" type="button" onclick="addCartProduct('${goods.id}')">加入购物车</button>
                            <a href="javascript:void(0)" onclick="getGoodsDetail(${goods.id!},0);" class="btn btn-default">更多明细</a>
                        </div>
                    </div>

                    <#if goods.tag == '0'><div class="sticker sticker-sale"></div></#if>

                </div>
            </div>
        </div>
    </#list>
</#if>
<#include "footer1.ftl"/>

<#include "footer2.ftl"/>
